import React from 'react';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { Container, Avatar } from '@material-ui/core';
import User from '@/store/user';
import { useStore } from 'reto';
import { usePage } from '@/hooks/page';
import Footer from '@/component/Footer';

const useStyles = makeStyles(theme => ({
  container: {
    marginTop: '24px',
  },
  avatar: {
    width: theme.spacing(6),
    height: theme.spacing(6),
    marginRight: theme.spacing(1),
  },
}));

export default () => {
  usePage({
    appBarStyle: 'none',
  });
  const classes = useStyles();
  const userData = useStore(User).user;

  return (
    <Container className={classes.container}>
      <Typography variant="h2" component="h3" gutterBottom>
        关于我
      </Typography>
      <Box
        display="flex"
        flexDirection="row"
        alignItems="center"
        marginBottom={3}
      >
        <Avatar
          className={classes.avatar}
          alt={userData?.name}
          src={userData?.face}
        />
        <Typography variant="h5">{userData?.name}</Typography>
      </Box>
      <p>
        Email：tenmiaomiao@outlook.com
        <br />
        Github：10miaomiao
        <br />
        Bilibili：10喵喵
        <br />
        酷安：_10喵喵
        <br />
      </p>

      <Footer />
    </Container>
  );
};
